<template>
  <div class="index">
    <!-- 头部组件 -->
    <Header />

    <!-- 主体内容 -->
    <main>
      <!-- 容器 -->
      <div class="container">
        <!-- 报名单不足时展示 -->
        <div class="member-bar" style="display: none">
          <img
            src="https://qiniu-image.qtshe.com/1535422554948/pc/56/notice-icon.png"
            alt=""
            class="member-bar-icon"
          />
          <span class="member-bar-content"
            >报名单不足，已暂停招聘，补充报名单后开始招聘</span
          >
          <span ptpid="buy-apply-in-member-bar" class="member-bar-btn"
            >补充报名单</span
          >
        </div>
        <!-- 头部容器 -->
        <div class="top-container">
          <!-- 标题 -->
          <div class="title">
            简历管理
            <span>（仅展示最近6个月的报名记录）</span>
          </div>
          <!-- 下拉框 -->
          <div class="selection">
            <div class="selection-wrap active">已报名</div>
            <div class="selection-wrap">附近求职者</div>
            <div class="el-selects">
              <select>
                <option value="all">全部职位</option>
                <option value="">高薪厨师</option>
              </select>
            </div>
          </div>
          <!-- 滑动标题 -->
          <div class="tab-selection">
            <el-tabs v-model="activeName">
              <el-tab-pane label="未联系" name="didNotContact"></el-tab-pane>
              <el-tab-pane label="已联系" name="hasContacted"></el-tab-pane>
              <el-tab-pane label="合适" name="suitable"></el-tab-pane>
              <el-tab-pane label="不合适" name="improper"></el-tab-pane>
              <el-tab-pane label="全部" name="whole"></el-tab-pane>
            </el-tabs>
          </div>
          <!-- 排序方式 -->
          <div class="condition">
            <!-- 排序 -->
            <div class="top-condition-row">
              <div class="condition-item">
                <div class="desc">排序方式</div>
                <div class="el-select">
                  <select name="sortWay" id="">
                    <option value="">最新报名</option>
                    <option value="">最早报名</option>
                  </select>
                </div>
              </div>
              <div class="condition-item">
                <div class="search-box">
                  <i class="el-icon-search"></i>
                  <input
                    type="text"
                    name="searchInp"
                    placeholder="搜索候选人"
                  />
                  <button>搜索</button>
                </div>
              </div>
            </div>
            <!-- 留言信息 -->
            <div
              class="condition-extra-panel"
              v-if="!conditionExtraPanelStatus"
            >
              <div class="condition-item">
                <span>是否留言</span>
                <select name="" id="">
                  <option value="">不限</option>
                  <option value="">无留言</option>
                  <option value="">有留言</option>
                </select>
              </div>
              <div class="condition-item">
                <span>是否备注</span>
                <select name="" id="">
                  <option value="">不限</option>
                  <option value="">无备注</option>
                  <option value="">有备注</option>
                </select>
              </div>
            </div>
            <!-- 展开所有选项 -->
            <div class="bottom-condition-row" @click="showConditionExtraPanel">
              <span>展开更多选项</span>
              <img
                src="https://qiniu-app.qtshe.com/condition-arrow-down.png"
                ref="conditionExtraPanelIcon"
                alt=""
                class=""
              />
            </div>
          </div>
        </div>
        <!-- 主体容器 -->
        <div class="content-container">
          <!-- 主体 -->
          <div class="content"></div>
          <!-- 切换页面按钮 -->
          <div class="pageButtons">
            <el-pagination background layout="prev, pager, next" :total="100">
            </el-pagination>
          </div>
        </div>
      </div>
    </main>

    <!-- 尾部组件 -->
    <Footer />
  </div>
</template>

<script>
// 引入 jquery
import $ from "jquery";
// 引用公用样式
import "../assets/css/all.css";
// 引入头部组件
import Header from "@/components/Header.vue";
// 引入尾部组件
import Footer from "@/components/Footer.vue";
// 引入新报名信息组件
import NewRegistrationInfo from "@/components/index/NewRegistrationInfo.vue";

export default {
  // 组件名
  name: "ResumeManagement",
  // 子组件
  components: {
    Header,
    Footer,
    NewRegistrationInfo,
  },
  // 展示的数据
  data() {
    return {
      // 留言部分状态
      conditionExtraPanelStatus: true,
      activeName: "didNotContact",
    };
  },
  // 方法
  methods: {
    // 展开留言信息
    showConditionExtraPanel() {
      // 旋转图片信息
      if (this.conditionExtraPanelStatus) {
        this.$refs.conditionExtraPanelIcon.style.transform = "rotate(180deg)";
      } else {
        this.$refs.conditionExtraPanelIcon.style.transform = "rotate(360deg)";
      }
      this.$refs.conditionExtraPanelIcon.style.transition = "all ease .6s";

      // 显示留言信息部分
      this.conditionExtraPanelStatus = !this.conditionExtraPanelStatus;
    },
  },
};
</script>

<style scoped>
main {
  width: 100%;
  border: 1px solid black;
}
/* 容器 */
main .container {
  max-width: 1200px;
  margin: 100px auto 0;
}
/* 头部容器 */
main .top-container {
  padding: 10px;
  border-radius: 5px;
  background: white;
}
/* 标题 */
main .top-container .title {
  color: #172238;
  font-size: 20px;
  font-weight: 900;
  height: 30px;
  line-height: 30px;
  padding: 25px 0;
}
main .top-container .title span {
  color: #808080;
  font-size: 14px;
  font-weight: 400;
}
/* 下拉框 */
main .top-container .selection {
  height: 40px;
  padding-bottom: 25px;
  display: flex;
}
main .top-container .selection .selection-wrap,
main .top-container .selection select {
  color: #172238;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  outline: none;
  border: none;
  border-radius: 5px;
  background: #f6f7fb;
  margin-right: 10px;
  transition: all ease 0.6s;
  cursor: pointer;
}
main .top-container .selection .active {
  color: #009c8b;
  transition: all ease 0.6s;
}
main .top-container .selection select:focus {
  border: 1px solid #009c8b;
  transition: all ease 0.6s;
}
/* 排序方式 */
main .top-container .condition {
  /* height: 80px; */
  /* padding-bottom: 20px; */
  display: flex;
  flex-direction: column;
}
/* 排序 */
main .top-container .condition .top-condition-row {
  color: #808080;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  display: flex;
}
main .top-container .condition .top-condition-row .condition-item {
  display: flex;
  justify-content: space-around;
  margin-right: 10px;
}
main .top-container .condition .top-condition-row .condition-item select {
  width: 220px;
  height: 40px;
  color: #606266;
  outline: none;
  margin-left: 20px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  transition: all ease 0.6s;
}
main .top-container .condition select:focus {
  border: 1px solid #009c8b;
  transition: all ease 0.6s;
}
main .top-container .condition .top-condition-row .condition-item .search-box {
  position: relative;
}
main
  .top-container
  .condition
  .top-condition-row
  .condition-item
  .search-box
  i {
  width: 14px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 5px;
}
main .top-container .condition .search-box input {
  width: 220px;
  height: 38px;
  text-indent: 2em;
  border-radius: 5px;
  outline: none;
  border: none;
  border: 1px solid #e8e8e8;
  transition: all ease 0.6s;
}
main
  .top-container
  .condition
  .top-condition-row
  .condition-item
  .search-box
  input:focus {
  border: 1px solid #009c8b;
  transition: all ease 0.6s;
}
main
  .top-container
  .condition
  .top-condition-row
  .condition-item
  .search-box
  button {
  width: 40px;
  height: 40px;
  color: #808089;
  font-size: 14px;
  border: none;
  background: transparent;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
/* 留言信息 */
main .top-container .condition-extra-panel {
  height: 40px;
  line-height: 40px;
  color: #808089;
  font-size: 14px;
  display: flex;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #e8e8e8;
}
main .top-container .condition-extra-panel select {
  width: 200px;
  height: 40px;
  color: #606266;
  outline: none;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  transition: all ease 0.6s;
  margin: 0 25px 0 10px;
}
/* 展开所有选项 */
main .top-container .condition .bottom-condition-row {
  color: #808089;
  font-size: 14px;
  text-align: center;
  transition: all ease 0.6s;
  margin-top: 20px;
}
main .top-container .condition .bottom-condition-row img {
  width: 16px;
  height: 14px;
  transition: all ease 0.6s;
}
main .top-container .condition .bottom-condition-row span,
main .top-container .condition .bottom-condition-row img {
  cursor: pointer;
}
/* 主体容器 */
main .content-container {
  border: 1px solid black;
  margin: 50px 0 0;
}
/* 主体 */
main .content-container .content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
main .content-container .content div {
  flex: 40%;
  height: 300px;
  margin: 10px;
}
/* 切换页面按钮 */
main .content-container .pageButtons {
  margin-top: 30px;
  text-align: center;
  border: 1px solid red;
}
/* ------------------ 媒体查询 ---------------- */
@media screen and (max-width: 700px) {
  /* 排序 */
  main .top-container .condition .top-condition-row .condition-item select {
    width: 100px;
    transition: all ease 0.6s;
  }
  main
    .top-container
    .condition
    .top-condition-row
    .condition-item
    .search-box
    input {
    width: 150px;
    transition: all ease 0.6s;
  }

  main .top-container .condition-extra-panel select {
    width: 100px;
    margin: 0 11px 0 5px;
    transition: all ease 0.6s;
  }
}
</style>